<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生 子代 选择器</title>
		<style>
			/* 派生【后代】选择器 ：抓取元素：根据祖先元素内找所以匹配的子孙元素
			语法：祖先任意选择器 后代选择器{}*/
			#header span{
				display: block;
				width:50%;
				background-color: #00ff7f;
			}
			/* 子代选择器：抓取元素，父元素内找到所以匹配子元素
			 语法：父元素 任意选择器>子元素 任意选择器*/
			 #header>span{
				 background-color: #ff557f;
			 }
			 #header>span:hover{
				 background-color: #aaaaff;
			 }
			 
		</style>
	</head>
	<body>
		<div id="header">
			<span>左侧导航区</span>
		    <span><div class="header">
			<span>右侧导航区1</span>
			<span>右侧导航区2</span>
			</div></span>
		</div>
	</body>
</html>